Mettre en place une transition
Une transition CSS permet de faire durer un changement de style sur une durée afin de créer une animation. Dans cet exemple, le fait de survoler le paragraphe avec la souris va changer sa couleur avec une transition de 1s :
p{
color: red;
/* il faut préciser quel style est impacté par la transition, la durée de cette dernière ainsi que sa courbe d'accéleration */
transition: color 1s ease;
}
p:hover{
color: blue;
}
Passe ta souris !
Attention : toutes les propriétés CSS ne peuvent pas être animées grâce à une transition.
(liste complète ici :https://developer.mozilla.org/fr/docs/Web/CSS/CSS_animated_properties)
Il est possible de mettre une transition sur plusieurs styles en même temps avec "all" :
p{
color: white;
background-color: black;
transition: all 1s ease;
}
p:hover{
color: black;
background-color: white;
}
Passe ta souris !
Courbe d'accélération d'une transition
On peut choisir parmis plusieurs courbes d'accélération pour l'effet de la transition :
- ease : Rapide sur le début et ralenti sur la fin.
- linear : La vitesse est constante sur toute la durée de l'animation.
- ease-in : Lent sur le début et accélère de plus en plus vers la fin.
- ease-out : Rapide sur le début et décèlere sur la fin.
- ease-in-out : Le départ et la fin sont lents.
Il est même possible de créer sois-même ses propres courbes d'accélération (appelées courbes de Bézier) grâce à un générateur comme celui-ci :https://cubic-bezier.com/
/* Transition utilisant une courbe personnalisée */
transition: all 1s cubic-bezier(.14,1.43,.99,-0.71);